<template>
  <div class="table-container">
    <el-table :data="vatableData" border class="vtable">
      <el-table-column
        v-for="(item, key) in tableheader"
        :key="key"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-if="scope.$index === 0"
            v-model="checksearch"
            :label="key"
            >{{ cb }}
          </el-checkbox>
          <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "vaTable",
  props: {
    vatableData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      cb: " ",
      tableheader: [
        { label: "A相电压", prop: "axdy" },
        { label: "B相电压", prop: "bxdy" },
        { label: "C相电压", prop: "cxdy" },
        { label: "A相电流", prop: "axdl" },
        { label: "B相电流", prop: "bxdl" },
        { label: "C相电流", prop: "cxdl" },
        { label: "瞬时总有功功率", prop: "sszyggl" },
        { label: "瞬时A相有功功率", prop: "ssaxyggl" },
        { label: "瞬时B相有功功率", prop: "ssbxyggl" },
        { label: "瞬时C相有功功率", prop: "sscxyggl" },
        { label: "瞬时总无功功率", prop: "sszwggl" },
        { label: "瞬时A相无功功率", prop: "ssaxwggl" },
        { label: "瞬时B相无功功率", prop: "ssbxwggl" },
        { label: "瞬时C相无功功率", prop: "sscxwggl" },
        { label: "瞬时总视在功率", prop: "sszszgl" },
        { label: "瞬时A相视在功率", prop: "ssaxszgl" },
        { label: "瞬时B相视在功率", prop: "ssbxszgl" },
        { label: "瞬时C相视在功率", prop: "sscxszgl" },
        { label: "总功率因数", prop: "zglxs" },
        { label: "A相功率因数", prop: "axglxs" },
        { label: "B相功率因数", prop: "bxglxs" },
        { label: "C相功率因数", prop: "cxglxs" },
        { label: "A相相角", prop: "axxj" },
        { label: "B相相角", prop: "bxxj" },
        { label: "C相相角", prop: "cxxj" },
        { label: "零线电流", prop: "lxdl" },
        { label: "电网频率", prop: "dwpl" },
        { label: "一分钟有功总平均功率", prop: "1mygzpjgl" },
        { label: "当前有功需量", prop: "ygxl" },
        { label: "当前无功需量", prop: "wgxl" },
        { label: "当前视在需量", prop: "szxl" },
        { label: "表内温度", prop: "bnwd" },
        { label: "时钟电池电压(内部)", prop: "szdcdynb" },
        { label: "停电抄表电池电压(外部)", prop: "tdcbdcdywb" },
        { label: "内部电池工作时间", prop: "nbdcgzsj" },
      ],
      checksearch: [],
    };
  },
};
</script>

<style lang="scss">
.vtable {
  display: flex !important;
  flex-direction: row !important;
  .el-table__header-wrapper {
    display: inline-block;
    width: 12.5rem /* 350/16 */;
    th {
      width: 12.5rem /* 350/16 */;
    }
  }
  .el-table__body-wrapper {
    display: inline-block;
    width: calc(100% - 12.5rem);
    .el-table__body {
      width: 100% !important;
      tbody {
        display: block;
        width: 100%;

        tr {
          width: 80%;
          td {
            width: 100%;
          }
        }
        tr:nth-of-type(1) {
          width: 20%;
        }
      }
    }
    .el-table__empty-block {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }
  }
  table {
    display: block;
    position: relative;
    width: 100%;
  }
  thead {
    float: left;
  }

  tbody tr {
    display: inline-block;
  }

  th,
  td {
    display: block;
    height: 45px;
  }
}
</style>
